<template>
  <div>
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">{{ $t('m.common.button.add') }}</a-button>
      <a-button @click="batchDel" type="default"  icon="delete">{{ $t('m.common.button.delete') }}</a-button>

      <div style="float: right">
        <a-input-search style="width: 200px;" :placeholder="$t('m.common.label.guan-jian-zi')" enter-button @search="onSearch"></a-input-search>
      </div>
    </div>

    <!-- table区域-begin -->
    <a-table
      ref="table"
      size="middle"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
      @change="handleTableChange">
      <template slot="serialNum" slot-scope="text,record,index">
        {{(ipagination.current-1) * ipagination.pageSize + parseInt(index) + 1}}
      </template>
      <template slot="action" slot-scope="text, record">
        <a @click="handleEdit(record)">{{ $t('m.common.button.design') }}</a>
        <a-divider type="vertical"/>
        <a-dropdown>
          <a class="ant-dropdown-link">{{$t('m.common.button.more')}}
            <ych-icon type="down"/>
          </a>
          <a-menu slot="overlay">
            <a-menu-item>
              <a @click="handleTest(record)">{{ $t('m.common.button.test') }}</a>
            </a-menu-item>
            <a-menu-item>
              <a @click="handleGetUrl(record)">{{$t('m.eform.appreport.entity.widgetUrl') }}</a>
            </a-menu-item>
            <a-menu-item>
              <a-popconfirm :title="$t('m.common.tip.delete_confirm')" @confirm="() => handleDelete(record.id)">
                <a>{{ $t('m.common.button.delete') }}</a>
              </a-popconfirm>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </template>

    </a-table>

    <actReportWidget-modal ref="modalForm" @ok="modalFormOk" :groupId="groupId"/>

    <ReportWidgetRedirectModal ref="reportWidgetRedirectModal"/>
  </div>
</template>

<script>

  import { YcListMixin } from '@/mixins/YcListMixin'
  import { getWidgetUrl } from '@/utils/hbdUtil'
  import ActReportWidgetModal from './modules/ActReportWidgetModal'
  import ReportWidgetRedirectModal from './redirect/ReportWidgetRedirectModal'
  import YchConstant from "@/api/YchConstant";

  export default {
    name: 'ActReportWidgetList',
    mixins: [YcListMixin],
    components: {
      ActReportWidgetModal,
      ReportWidgetRedirectModal
    },
    props: {
      groupId: {
        type: String,
        required: true
      },
    },
    data () {
      return {
        queryParam: {
          groupId: this.groupId
        },
        isorter: {
          column: 'orderNum',
          order: 'asc',
        },
        columns: [
          {
            title:this.$t('m.common.label.number'),
            dataIndex: '',
            key: 'rowIndex',
            width: 50,
            align: 'center',
            scopedSlots: { customRender: 'serialNum' },
          },
          {
            title: this.$t('m.eform.appreport.entity.widgetName') ,
            align: 'center',
            dataIndex: 'widgetName'
          },
          {
            title: this.$t('m.eform.appreport.entity.widgetCode'),
            align: 'center',
            dataIndex: 'widgetCode'
          },
          {
            title: this.$t('m.common.label.sort'),
            align: 'center',
            dataIndex: 'orderNum',
            width: 80,
          },
          {
            title: this.$t('m.common.label.operate'),
            dataIndex: 'action',
            align: 'center',
            width: 220,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: YchConstant.PREFIX_EFORM + '/report/actReportWidget/list',
          delete: YchConstant.PREFIX_EFORM + '/report/actReportWidget/delete',
          deleteBatch: YchConstant.PREFIX_EFORM + '/report/actReportWidget/deleteBatch',
        },
      }
    },
    methods: {
      handleTest (record) {
        this.$refs.reportWidgetRedirectModal.widgetCode = record.widgetCode
        this.$refs.reportWidgetRedirectModal.visible = true
      },
      handleGetUrl (record) {
        const url = getWidgetUrl(record.widgetCode)
        this.$info({
          title: this.$t('m.eform.appreport.entity.widgetUrl'),
          content: url
        })
      },
      handleEdit: function (record) {
        this.$refs.modalForm.edit(record)
        this.$refs.modalForm.disableSubmit = false
      },
      handleAdd: function () {
        this.$refs.modalForm.add()
        this.$refs.modalForm.disableSubmit = false
      },
    }
  }
</script>
<style lang="less" scoped>
</style>
